import { log } from "console";
import { ElButton } from "element-plus";
import {defineComponent, onMounted, ref, watch} from "vue";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import Keyboard from "@/components/keyboard";
import {getPrice, getZYYJJDetail} from "@/api/his";
import {MaskedName} from "@/utils/hooks";
import {IZyjyj} from "@/api/typing";
import {useUserStore} from "@/store/modules/user";
import {closeLoading, showLoading} from "@/utils";
import router from "@/router";
export default defineComponent({
    setup() {
        const id1 = ref(-1)
        const je = ref('')
        const jeArr = ref(["200", "500", "1000", "2000"])
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080

        // 1. 控制键盘显示/隐藏
        const isKeyboardShow = ref(false);
        /** 2. 键盘值同步到输入框（接收 Keyboard 的 update:value 事件） */
        const handleKeyboardValueChange = (val: string) => {
            je.value = val;
        };
        /** 3. 点击键盘“确定”时触发的处理逻辑*/
        const handleKeyboardSubmit = (val: string) => {
            if (val === '') {
                return;
            }
            isKeyboardShow.value = false; // 关闭键盘
        }
        //监听je.value变化，渲染固定金额按钮标签
        watch(() => je.value, (val) => {
                const tempData = jeArr.value.includes(val)
                id1.value = tempData ? jeArr.value.indexOf(val) : -1
        },{immediate: true})

        // 获取用户信息
        const userStore = useUserStore();
        const jzr = ref(userStore.user?.PAT_NAME ?? '未知');
        const jzkh = ref(userStore.user?.JZKH ?? '')


        const zyData = ref<IZyjyj>()//住院预交金数据
        //获取项目数据
        async function getZYYJJData() {
            showLoading();
            const res = await getZYYJJDetail({
            })
            zyData.value = res.rows!;
            closeLoading();
        }
        getZYYJJData();

        // 支付页面跳转
        const handlePay = () => {
            // 如果je.value大于0元，跳转页面
            if (Number(je.value) > 0) {
                console.log("自助结算金额",je.value)
                router.push({
                    // 自助结算
                    path: "/smt",
                    query: {
                        zyyjAmount: je.value
                    }
                })
            }

        }
        return () => <div class={Style.top}>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <div class={Style.container_mar} >
                <div class={Style.body}>
                    <div class={Style.outer}>
                        <div class={Style.fontStyle}>
                            基本信息：
                        </div>
                        <div class={Style.fontStyle2} style={{ display: "flex", marginLeft: "44px" }}>
                            <div >
                                <div>
                                    就 诊 人：{jzr.value}
                                </div>
                                <div>
                                    住院科室：{zyData.value?.ks}
                                </div>
                                <div>
                                    住院日期：{zyData.value?.zyrq}
                                </div>

                                <div>
                                    余   额：<span style={{ color: "red" }}>{zyData.value?.ye}</span>
                                </div>
                            </div>
                            <div style={{ paddingLeft: "60px" }}>
                                <div>
                                    就诊卡号：{jzkh.value}
                                </div>
                                <div>
                                    住院状态：{zyData.value?.zyStatus}
                                </div>
                                <div>
                                    费用全额：¥{zyData.value?.fyqe}
                                </div>
                            </div>

                        </div>
                        {
                            KEEP_VIDEO_TOP?"":<div class={Style.divider_contain}>
                            <div class={Style.divider_top}></div>
                        </div>
                        }

                        <div>
                            <div class={Style.fontStyle3}>
                                预缴金额：
                            </div>
                            <div class={Style.fontStyle4} onClick={() => {
                                isKeyboardShow.value = true;
                            }}>
                                <span> ￥</span>
                                <input type="text"  v-model={je.value} class={Style.noborderinput} placeholder="请输入缴纳金额" />
                            </div>

                        </div>
                        <div class={Style.divider_contain}>
                            <div class={Style.divider_top}></div>
                        </div>

                        <div class={Style.outer2}>
                            {
                                jeArr.value.map((e, index) => <div id={`act${index}`} class={[Style.tag, Style.fontStyle_1,
                                    ,  id1.value != -1 && id1.value === index ? Style.tag_active : ""
                                ]}
                                    onClick={() => {
                                        id1.value = index
                                        je.value = e
                                    }}
                                >
                                    <div >{e}元</div>
                                </div>)
                            }

                        </div>

                        <div class="mainZyyjBtn">
                            <ElButton class={[Style.zyyjbtn]} type="success" onClick={handlePay}>去支付</ElButton>
                        </div>
                    </div>
                </div>
            </div>
            {/* 键盘组件 */}
            <Keyboard
                type="number" // 键盘类型：/数字字母 normal  /纯字母 letter  /纯数字 number"
                modelValue={isKeyboardShow.value} // 控制显示/隐藏
                value={je.value} // 双向同步输入值
                onUpdate:modelValue={(val) => isKeyboardShow.value = val} // 接收键盘关闭事件
                onUpdate:value={handleKeyboardValueChange} // 接收键盘输入值
                onKeySubmit={handleKeyboardSubmit} // 接收键盘确定事件
            />

        </div>
    }
})
